<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
<script type="text/javascript">
	function deleteUser(usid) {
		$.post("deleteUser",{"usid":usid},function(data){
			if (data == "ok") {
				alert("删除成功");
				window.location.reload();
			}else {
				alert("删除失败");
				window.location.reload();
			}
		}
		);
	}
	
	function editCustomer(usid) {
		$("#msg1").text("");
		$.ajax({
			type:"get",
			url:"getUserById",
			data:{"usid":usid},
			success:function(data){
				$("#msg").text("");
				$("#usid").val(data.usid);
				$("#username1").val(data.username);
				$("#password1").val(data.password);
				$("#rname1").val(data.rname);
				$("#usertel1").val(data.usertel);
				$("#usernumber1").val(data.usernumber)
				
				if(data.gender == "男"){
					$("#nan").attr("checked",true);
				}else{
					$("#nv").attr("checked",true);
				}
			}
		});
	}
	
	$(function() {
		$("#preservationModify").click(function(){
			$.post("verification",{"username":$("#username1").val()},function(data){
				var pattern1 = /^[\u4E00-\u9FA5]{1,6}$/;
				var pattern2 = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				var pattern3 = /^1[34578]\d{9}$/;
				if($("#username1").val().length==0){
					$("#msg1").text("用户名不为空");
					return
				}
				if(data != null && data != ""){
					 if (data != $("#usid").val()) {
						 $("#msg1").text("用户名不重复");
						 return
					}
				}
				if($("#rname1").val().length==0){
					$("#msg1").text("姓名不为空");
					return
				}
				else if(pattern1.test($("#rname1").val())==false){
					$("#msg1").text("姓名不符合要求,必修为1-6个中文字符");
					return
				}
				else if ($("#password1").val().length==0) {
					$("#msg1").text("密码不为空");
				}
				else if($("#usernumber1").val().length==0){
					$("#msg1").text("身份证号不为空");
					return
				}
				else if(pattern2.test($("#usernumber1").val())==false){
					$("#msg1").text("身份证号不符合要求,必须为18位数字");
					return
				}
				else if($("#usertel1").val().length==0){
					$("#msg1").text("电话不为空");
					return
				}
				else if(pattern3.test($("#usertel1").val())==false){
					$("#msg1").text("电话不符合要求,必须位13,14,15,17,18开头的11位数字");
					return
				}
				
				$.post("preservationModify",$("#editUser").serialize(),function(data){
					if(data == "ok"){
						alert("修改成功");
						window.location.reload();
					}else{
						alert("修改失败");
						window.location.reload();
					}
				});
			});
			
		});
		
		$("#addUser").click(function(){
			$.post("verification",{"username":$("#username2").val()},function(data){
				var pattern1 = /^[\u4E00-\u9FA5]{1,6}$/;
				var pattern2 = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				var pattern3 = /^1[34578]\d{9}$/;
				
				if($("#username2").val().length==0){
					$("#msg2").text("用户名不为空");
					return false;
				}
				if(data != null && data != ""){
					 $("#msg2").text("用户名不重复");
					 return false;
				}
				
				if($("#rname2").val().length==0){
					$("#msg2").text("姓名不为空");
					return false;
				}
				else if(pattern1.test($("#rname2").val())==false){
					$("#msg2").text("姓名不符合要求,必修为1-6个中文字符");
					return false;
				}
				else if ($("#password2").val().length==0) {
					$("#msg2").text("密码不为空");
					return false;
				}
				else if($("#usernumber2").val().length==0){
					$("#msg2").text("身份证号不为空");
					return false;
				}
				else if(pattern2.test($("#usernumber2").val())==false){
					$("#msg2").text("身份证号不符合要求,必须为18位数字");
					return false;
				}
				else if($("#usertel2").val().length==0){
					$("#msg2").text("电话不为空");
					return false;
				}
				else if(pattern3.test($("#usertel2").val())==false){
					$("#msg2").text("电话不符合要求,必须位13,14,15,17,18开头的11位数字");
					return false;  
				}else{
					
				}
				
				$.post("addUser",$("#editUser2").serialize(),function(data){
					if(data == "ok"){
						alert("添加成功");
						window.location.reload();
					}else{
						alert("添加失败");
						window.location.reload();
					}
				});
			});
		})
	})
</script>
</head>
<body style="background-color: #23262E">
<%@include file="head.jsp"%>
<div class="dddiv" style="background-color: #F2F2F2;width:-webkit-fill-available;height:800px;margin-left:auto;margin-right: auto">
<div class="dadiv" style="top: 20px;width: 1200px;height: 775px">
    <div class="divbody" style="width: 1000px;left: 0px;width: 1200px;height: -webkit-fill-available;">
		<table cellspacing="0" cellpadding="1" rules="all" bordercolor="gray" border="1" id="DataGrid1" style="BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; WIDTH: 100%; WORD-BREAK: break-all; BORDER-BOTTOM: gray 1px solid; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #f5fafe; WORD-WRAP: break-word">
				<tr>
					<td class="ta_01" align="center" bgColor="#23262E" colSpan="10" height="26" style="color: #F2F2F2">
						<strong>
							<STRONG>用户信息</STRONG> 
						</strong>
					</td>
				</tr>
				<tr>
					<td colspan="100%">
						<form action="${pageContext.request.contextPath}/admin/findUserByCondition" method="post">
						<table cellpadding="0" cellspacing="0" border="0" width="100%">
							<tr height="45px">
								<td align="center" class="ta_01">用户名:</td>
								<td class="ta_01">
									<input type="text" name="username" size="15" value="" id="Form1_userName" class="bg" />
								</td>
								<td align="center">真实姓名:</td>
								<td>
									<input type="text" name="rname" value="" >
								</td>
								<td align="center">手机号:</td>
								<td>
									<input type="text" name="usertel" value="">
								</td>
								<td align="center" class="ta_01">性别:</td>
								<td class="ta_01">
								<select name="gender" id="category">
										<option value="" selected="selected">--选择性别--</option>
										<option value="男">男</option>
										<option value="女">女</option>
								</select>
								</td>
								<td align="center" class="ta_01">身份证号:</td>
								<td class="ta_01">
									<input type="text" name="usernumber" value=""> 
								</td>
							</tr>
							<tr>
								<td align="center" class="ta_01" colspan="100%" height="60px">
									<button type="submit" id="search" name="search" value="查询" class="btn btn-success">
									&#26597;&#35810;
									</button> 
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
									<input type="reset" name="reset" value="重置查询条件" class="btn btn-success" />
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
									<button type="button" id="add" value="添加用户" class="btn btn-success" data-toggle="modal" data-target="#myModal2">
									&#28155;&#21152;
									</button>
								</td>
							</tr>
						</table>
						</form>
					</td>	
				</tr>
				<tr style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; HEIGHT: 25px; BACKGROUND-COLOR: #23262E;color: #F2F2F2">
					<td align="center" width="9%">用户ID</td>
					<td align="center" width="15%">用户名</td>
					<td align="center" width="15%">用户真实姓名</td>
					<td align="center" width="15%">手机号</td>
					<td width="8%" align="center">性别</td>
					<td width="10%" align="center">用户类型</td>
					<td width="4%" align="center">删除</td>
					<td width="4%" align="center">修改</td>
				</tr>
			<c:forEach items="${users}" var="u">
				<c:if test="${u.role.equals('普通会员')}">
				<tr onmouseover="this.style.backgroundColor = 'white'" onmouseout="this.style.backgroundColor = '#F5FAFE';">
					<td style="CURSOR: hand; HEIGHT: 22px" align="center" width="9%">${u.usid }</td>
					<td style="CURSOR: hand; HEIGHT: 22px" align="center" width="15%">${u.username}</td>
					<td style="CURSOR: hand; HEIGHT: 22px" align="center" width="15%">${u.rname}</td>
					<td style="CURSOR: hand; HEIGHT: 22px" align="center" width="15%">${u.usertel }</td>
					<td align="center" style="HEIGHT: 22px" width="8%">${u.gender}</td>
					<td align="center" style="HEIGHT: 22px" width="10%">${u.role }</td>
					<td align="center"><a href="#" class="btn btn-danger btn-block" onclick="deleteUser(${u.usid})">删除</a></td>
					<td align="center">
					<a href="#" class="btn btn-dark btn-block" data-toggle="modal" data-target="#myModal" onclick="editCustomer(${u.usid})">修改</a>
					</td>
				</tr>
				</c:if>
			</c:forEach>
		</table>
							<div class="modal fade" id="myModal">
								<div class="modal-dialog modal-lg" role="document">
      								<div class="modal-content">
        								<div class="modal-header">
          									<h4 class="modal-title">用户信息修改</h4>
          									<button type="button" class="close" data-dismiss="modal">&times;</button>
        								</div>
        								<div class="alert alert-warning">
    											<span id="msg1"></span>
  										</div>
       								 	<div class="modal-body">
         									<form class="form-horizontal" id="editUser">
         										<input type="hidden" id="usid" name="usid"/>
         										<div class="form-group">
         											<label for="username" class="col-2 control-label">用户名</label>
         											<div class="col-8">
         												<input type="text" class="form-control" id="username1" placeholder="用户名" name="username">
         											</div>
         										</div>
         										<div class="form-group">
         											<label for="password" class="col-sm-2 control-label">密码</label>
         											<div class="col-sm-10">
         												<input type="text" class="form-control" id="password1" placeholder="密码" name="password">
         											</div>
         										</div>
         										<div class="form-group">
         											<label for="rname" class="col-sm-2 control-label">真实姓名</label>
         											<div class="col-sm-10">
         												<input type="text" class="form-control" id="rname1" placeholder="真实姓名" name="rname">
         											</div>
         										</div>
         										<div class="form-group">
         											<label class="col-sm-2 control-label">性别</label>
         											<div class="col-sm-10">
         												<label class="col-sm-3 radio-inline"><input type="radio" name="gender" value="男" id="nan">男</label>
    													<label class="col-sm-7 radio-inline"><input type="radio" name="gender" value="女" id="nv">女</label>
    												</div>
         										</div>
         										<div class="form-group">
         											<label for="usertel" class="col-sm-2 control-label">电话号码</label>
         											<div class="col-sm-10">
         												<input type="text" class="form-control" id="usertel1" placeholder="电话号码" name="usertel">
         											</div>
         										</div>
         										<div class="form-group">
         											<label for="usernumber" class="col-sm-2 control-label">身份证号码</label>
         											<div class="col-sm-10">
         												<input type="text" class="form-control" id="usernumber1" placeholder="身份证号码" name="usernumber">
         											</div>
         										</div>
         									</form>
        								</div>
        								<div class="modal-footer">
          									<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          									<button type="button" class="btn btn-dark" id="preservationModify">保存修改</button>
        								</div>
      								</div>
    							</div>
  							</div>
  							
  							
  							
  							<div class="modal fade" id="myModal2">
								<div class="modal-dialog modal-lg" role="document">
      								<div class="modal-content">
        								<div class="modal-header">
          									<h4 class="modal-title">添加用户</h4>
          									<button type="button" class="close" data-dismiss="modal">&times;</button>
        								</div>
        								<div class="alert alert-warning">
    											<span id="msg2"></span>
  										</div>
       								 	<div class="modal-body">
         									<form class="form-horizontal" id="editUser2">
         										<div class="form-group">
         											<label for="username2" class="col-2 control-label">用户名</label>
         											<div class="col-10">
         												<input type="text" class="form-control" placeholder="用户名" name="username" id="username2">
         											</div>
         										</div>
         										<div class="form-group">
         											<label for="password" class="col-sm-2 control-label">密码</label>
         											<div class="col-sm-10">
         												<input type="text" class="form-control" placeholder="密码" name="password" id="password2">
         											</div>
         										</div>
         										<div class="form-group">
         											<label for="rname" class="col-sm-2 control-label">真实姓名</label>
         											<div class="col-sm-10">
         												<input type="text" class="form-control" placeholder="真实姓名" name="rname" id="rname2">
         											</div>
         										</div>
         										<div class="form-group">
         											<label class="col-sm-2 control-label">性别</label>
         											<div class="col-sm-10">
         												<label class="col-sm-3 radio-inline"><input type="radio" name="gender" value="男" >男</label>
    													<label class="col-sm-7 radio-inline"><input type="radio" name="gender" value="女" >女</label>
    												</div>
         										</div>
         										<div class="form-group">
         											<label for="usertel" class="col-sm-2 control-label">电话号码</label>
         											<div class="col-sm-10">
         												<input type="text" class="form-control" placeholder="电话号码" name="usertel" id="usertel2">
         											</div>
         										</div>
         										<div class="form-group">
         											<label for="usernumber2" class="col-sm-2 control-label">身份证号码</label>
         											<div class="col-sm-10">
         												<input type="text" class="form-control" placeholder="身份证号码" name="usernumber" id="usernumber2">
         											</div>
         										</div>
         									</form>
        								</div>
        								<div class="modal-footer">
          									<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          									<button type="button" class="btn btn-dark" id="addUser">添加用户</button>
        								</div>
      								</div>
    							</div>
  							</div>
	</div>
</div>
</div>
</body>
</html>